<template>
    <div class="master-swiper">
      <swiper  auto  dots-class="custom-bottom" dots-position="center" :loop=loop :aspect-ratio=aspect>
        <swiper-item class="swiper-img" v-for="item in this.swiperData" :key="item.id">
          <img :src="item.imgUrl" class="item-img">
        </swiper-item>
      </swiper>
    </div>
</template>

<script>
export default {
  name: 'MasterSwiper',
  data () {
    return {
      aspect: 300 / 900,
      loop: true
    }
  },
  props: {
    swiperData: {
      type: Array
    }
  },
  mounted: function () {
    console.log(this.swiperData)
  }
}
</script>

<style lang="stylus" scoped>
  .master-swiper >>> .active
    background:rgba(255,255,255,1)  !important
  .master-swiper
    .swiper-img
      .item-img
        width: 100%
</style>
